.bar_group {
  .bar_group_item {
    .el-color-picker {
      .el-color-picker__trigger {
        height: 100%;
        width: 100%;
      }
    }
  }
}

$label_width: 135px;

.form_style {
  & > div {
    font-size: 0;
    .control_bar {
      /*border-bottom: 1px solid #d1d9dd;*/
      padding-bottom: 10px;
      padding-left: 20px;
      text-align: center;
      display: block;
      .first, .prev, .next, .last {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 1px;
      }

      .first {
        background: url("~@/assets/img/ajdj/arrow-l--.png") no-repeat;
        margin-right: 10px;
        &:hover {
          background: url("~@/assets/img/ajdj/arrow-l-.png") no-repeat;
        }
      }

      .prev {
        background: url("~@/assets/img/ajdj/arrow-l.png") no-repeat;
        margin-right: 20px;
        &:hover {
          background: url("~@/assets/img/ajdj/arrow-l1.png") no-repeat;
        }
      }

      .next {
        background: url("~@/assets/img/ajdj/arrow-r1.png") no-repeat;
        margin-left: 20px;
        margin-right: 10px;
        &:hover {
          background: url("~@/assets/img/ajdj/arrow-r.png") no-repeat;
        }
      }

      .last {
        background: url("~@/assets/img/ajdj/arrow-r--.png") no-repeat;
        &:hover {
          background: url("~@/assets/img/ajdj/arrow-r-.png") no-repeat;
        }
      }

      .add, .del {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 1px;
        font-size: 14px;
        vertical-align: top;
        margin-left: 5px;
        background-repeat: no-repeat;
        background-position: center center;
        cursor: pointer;
      }

      .add {
        background-image: url("~@/assets/img/ajdj/xyrjia.png");
      }

      .del {
        background-image: url("~@/assets/img/ajdj/xyrdel.png");
      }

    }
    .title {
      border-bottom: 1px solid #ccc;
      display: inline-block;
      width: 100%;
      height: 40px;
      .text {
        display: inline-block;
        height: 40px;
        padding: 0 10px;
        line-height: 40px;
        color: #429eda;
        font-size: 14px;
        /*border-bottom: 4px solid #429eda;*/

        box-shadow: 0px -3px 0px #2b91d4 inset;
      }
    }
    .item {
      display: inline-block;
      margin-top: 14px;
      margin-right: 34px;
      font-size: 0;
      font-style: normal;
      width: calc((100% - 70px) / 3);

      &.readonly {
        & > input {
          pointer-events: none;
          background-color: #f5f7fa;
          border: #e4e7ed 1px solid !important;
          color: #c0c4cf;
        }
        &.required {
          .label:after {
            display: none;
          }
        }
      }

      &.third:nth-of-type(3n) {
        margin-right: 0;
      }
      &.half {
        width: calc((100% - 35px) / 2);
      }
      &.half:nth-of-type(2n) {
        margin-right: 0;
      }
      .label {
        width: $label_width;
        height: 34px;
        display: inline-block;
        line-height: 34px;
        color: #666;
        font-size: 14px;
        position: relative;
        padding-left: 15px;
      }
      &.required {
        .label:after {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          height: 25px;
          left: 0;
          content: '*';
          line-height: normal;
          color: #f00;
          font-size: 25px;
        }
      }
      & > input {
        color: #333;
        font-size: 14px;
        border: #dcdfe6 1px solid !important;
        border-radius: 5px;
        outline: none;
        height: 34px;
        width: calc(100% - #{$label_width});
        text-indent: 10px;
      }
      .date_picker {
        outline: none;
        height: 34px;
        color: #333;
        font-size: 14px;
        /*border: #ccc 1px solid;*/
        width: calc(100% - #{$label_width});
      }
      .item_el_select {
        display: inline-block;
        width: calc(100% - #{$label_width});
      }
    }
    .textarea {
      font-size: 0;
      display: inline-block;
      margin-top: 14px;
      margin-right: 34px;
      width: 100%;
      .label {
        width: $label_width;
        height: 34px;
        display: inline-block;
        line-height: 34px;
        color: #666;
        font-size: 14px;
        vertical-align: top;
        position: relative;
        padding-left: 15px;
      }
      &.required {
        .label:after {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          height: 25px;
          left: 0;
          content: '*';
          line-height: normal;
          color: #f00;
          font-size: 25px;
        }
      }
      textarea {
        vertical-align: top;
        color: #333;
        font-size: 14px;
        border: #dcdfe6 1px solid !important;
        border-radius: 5px;
        outline: none;
        height: 100px;
        /*text-indent: 10px;*/
        padding-left: 10px;
        width: calc(100% - #{$label_width});
        resize: none;
        cursor: auto !important;
      }
      .files_box {
        vertical-align: top;
        color: #333;
        font-size: 14px;
        /*border: #ccc 1px solid;*/
        display: inline-block;
        /*outline: none;*/
        /*height: 100px;*/
        /*text-indent: 10px;*/
        width: calc(100% - #{$label_width});
        resize: none;
        cursor: auto !important;
        .upload_btn {
          background-repeat: no-repeat;
          background-position: calc(100% - 10px) center;
          background-image: url("~@/assets/img/web/informationdelivery/fj.png");
          padding-right: 30px;
        }
        .files_items {
          .files_item {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            background-color: #ececec;
            margin-right: 10px;
            margin-top: 10px;
            padding: 0 0 0 30px;
            border-radius: 3px;
            position: relative;
            background-repeat: no-repeat;
            background-position: 10px center;
            background-image: url("~@/assets/img/web/informationdelivery/fj.png");
            &.uploadSuccess {
              background-color: #c2e2f1;
              color: #333;
            }
            .progress {
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background-color: rgba(51, 158, 205, 0.2);
              z-index: 0;
            }
            .file_content {
              height: 100%;
              .del_fj {
                vertical-align: top;
                height: 100%;
                width: 30px;
                display: inline-block;
                background-repeat: no-repeat;
                background-position: center;
                background-image: url("~@/assets/img/web/informationdelivery/scfj.png");
                &:hover {
                  background-image: url("~@/assets/img/web/informationdelivery/scfj-.png");
                }
              }
              .download_fj {
                display: none;
                vertical-align: top;
                height: 100%;
                width: 30px;
                background-repeat: no-repeat;
                background-position: center;
                background-image: url("~@/assets/img/web/informationdelivery/xz.png");
                &:hover {
                  background-image: url("~@/assets/img/web/informationdelivery/xz_hover.png");
                }
              }
              /*position: absolute;*/
              /*top: 0;*/
              /*left: 0;*/
              /*width: 100%;*/
            }
          }
        }
      }
      input {
        &.row {
          color: #333;
          font-size: 14px;
          border: #dcdfe6 1px solid !important;
          border-radius: 5px;
          outline: none;
          height: 34px;
          width: calc(100% - #{$label_width});
          text-indent: 10px;
        }
      }
      &.readonly {
        .uploadSuccess {
          background-color: #f5f7fa !important;
        }
        textarea, input {
          pointer-events: none;
          background-color: #f5f7fa;
          border: #e4e7ed 1px solid !important;
          color: #c0c4cf;
          overflow: hidden;
        }

        .files_box {
          .upload_btn {
            display: none;
          }
          .files_items {
            .progress {
              display: none;
            }
            .file_content {
              .del_fj {
                display: none;
              }
              .download_fj {
                display: inline-block;
              }
            }
          }
        }
        &.required {
          .label:after {
            display: none;
          }
        }
      }

    }
  }
  .btn_box, .isEdit_btn_box {
    text-align: right;
    margin-top: 14px;
    margin-bottom: 14px;
  }
}

//.required {
//  .label {
//    position: relative !important;
//    padding-left: 15px;
//    display: inline-block;
//    &:after {
//      position: absolute;
//      top: 50%;
//      transform: translateY(-50%);
//      height: 25px;
//      left: 0;
//      content: '*';
//      line-height: normal;
//      color: #f00;
//      font-size: 25px;
//    }
//  }
//}

.client_box {
  .history_version {
    height: 70vh;
    .el-dialog__body {
      height: calc(100% - 54px);
      overflow-y: auto;
    }
  }
}

.nodata {
  position: relative;
  width: 100%;
  height: 100%;
  &::after {
    content: '暂无数据';
    position: absolute;
    top: 50%;
    left: 50%;
    //right: 0;
    //bottom: 0;
    font-size: 14px;
    transform: translate(-50%, -50%);
    color: #999;

  }
}

#app select:not(.el-range-input):not(.el-input__inner),
#app input:not(.el-range-input):not(.el-input__inner):not(.normal) {
  outline: none;
  //border-style: solid;
  border-color: #66afe9;
}

#app select:not(.el-range-input):not(.el-input__inner):focus,
#app input:not(.el-range-input):not(.el-input__inner):not(.normal):focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
  0 0 8px rgba(102, 175, 233, 0.6);
}

.justify {
  text-align: justify;
  &::after {
    content: ' ';
    display: inline-block;
    width: 100%;
  }
}
